import React from 'react'
import { RiDonutChartLine } from '@remixicon/react'
import Timeline from '@/library/gallery/components/Timeline'
import { DemoBlock } from '@/library/widgets/DemoBlock'

const TimeLine: React.FC<unknown> = () => (
  <>
    <DemoBlock title="基础用法- mode 默认 left">
      <Timeline>
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-11</Timeline.Item>
        <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
        <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="mode === right">
      <Timeline mode="right">
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
        <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
        <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="mode === alternate">
      <Timeline mode="alternate">
        <Timeline.Item>Create a services</Timeline.Item>
        <Timeline.Item>Solve initial network problems</Timeline.Item>
        <Timeline.Item>Technical testing</Timeline.Item>
        <Timeline.Item>Network problems being solved</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="reverse">
      <Timeline reverse>
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-11</Timeline.Item>
        <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
        <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="color 设置颜色">
      <Timeline>
        <Timeline.Item label="2015-09-01" color="green">Create a services</Timeline.Item>
        <Timeline.Item label="2015-09-01" color="red">Solve initial network problems</Timeline.Item>
        <Timeline.Item label="2015-09-01">Technical testing</Timeline.Item>
        <Timeline.Item label="2015-09-01">Network problems being solved</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="label - mode: left">
      <Timeline mode="left">
        <Timeline.Item label="2015-09-01" color="green">Create a services</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
        <Timeline.Item label="2015-09-01">Technical testing</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="label - mode: right">
      <Timeline mode="right">
        <Timeline.Item label="2015-09-01" color="green">Create a services</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
        <Timeline.Item label="2015-09-01">Technical testing</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="label - mode: alternate">
      <Timeline mode="alternate">
        <Timeline.Item label="2015-09-01" color="green">Create a services</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
        <Timeline.Item label="2015-09-01">Technical testing</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="mode === alternate 自定义position">
      <Timeline mode="alternate">
        <Timeline.Item position="left" color="green">Create a services</Timeline.Item>
        <Timeline.Item position="left">Solve initial network problems</Timeline.Item>
        <Timeline.Item position="right">Technical testing</Timeline.Item>
        <Timeline.Item position="right">Network problems being solved</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="label -  mode === alternate 自定义position">
      <Timeline mode="alternate">
        <Timeline.Item position="left" label="2015-09-01" color="green">Create a services</Timeline.Item>
        <Timeline.Item position="left" label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
        <Timeline.Item position="right" label="2015-09-01">Technical testing</Timeline.Item>
        <Timeline.Item position="right" label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="pending">
      <Timeline pending>
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-02</Timeline.Item>
        <Timeline.Item>Technical testing 2015-09-03</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="pending-reverse">
      <Timeline pending="loading..." reverse>
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-02</Timeline.Item>
        <Timeline.Item>Technical testing 2015-09-03</Timeline.Item>
      </Timeline>
    </DemoBlock>
    <DemoBlock title="自定义图标">
      <Timeline>
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
        <Timeline.Item dot={<RiDonutChartLine />} color="purple">Technical testing 2015-09-01</Timeline.Item>
        <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
      </Timeline>
    </DemoBlock>
  </>
)

export default TimeLine
